<template>
  <div class="goods-item" @click="itemClick">
    <img v-lazy="product.cover_url" alt="">
    <div class="goods-info">
      <p>{{product.title}}</p>
      <span class="price">
        <small>￥</small>
        {{product.price}}
      </span>
      <span class="collect">
        {{product.collects_count}}
      </span>
    </div>
  </div>
</template>

<script>
  import {
    useRouter
  } from 'vue-router';
  export default {
    name: "GoodsListItem",
    props: {
      product: Object,
      default () {
        return {}
      }
    },
    setup(props) {
      const router = useRouter()
      return {
        itemClick: () => {
          router.push({
            path: "/detail",
            query: {
              id: props.product.id
            }
          })
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .goods-item {
    width: 46%;
    padding-bottom: 40px;
    position: relative;

    img {
      width: 100%;
      border-radius: 5px;
    }

    .goods-info {
      font-size: 12px;
      position: absolute;
      bottom: 5px;
      left: 0;
      right: 0;
      overflow: hidden;
      text-align: center;

      p {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-bottom: 3px;
      }

      .price {
        color: red;
        margin-right: 20px;
      }

      .collect {
        position: relative;
      }

      .collect::before {
        content: '';
        position: absolute;
        left: -15px;
        width: 14px;
        height: 14px;
        top: -1px;
        background: url('~assets/images/collect.png') 0 0/14px 14px;
      }
    }
  }
</style>